<template>
	<view class="fd-dialog-mask" v-if="visible">
		<view class="fd-dialog">

			<button class="fd-dialog-button" @click="closeDialog">{{buttonTitle}}</button>
			<text class="fd-t2">{{content}}</text>
			<!-- <text class="fd-t1">您的提交已收到</text> -->

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}

		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			content: {
				type: String,
				default: "您的提交已收到,稍后将有工作人员致电 请注意接听电话"
			},
			buttonTitle: {
				type: String,
				default: "我知道了"
			}

		},
		methods: {
			closeDialog() {
				console.log("收到点击事件");
				this.$emit('update-visible', false);
			}
		}
	};
</script>

<style scoped>
	.fd-t1 {
		margin-bottom: 30rpx;
		font-family: MicrosoftYaHei, MicrosoftYaHei;
		font-weight: bold;
		font-size: 29rpx;
		color: #333333;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.fd-t2 {
		padding: 20rpx;
		margin-bottom: 30rpx;
		font-family: MicrosoftYaHeiLight;
		font-size: 28rpx;
		color: #333333;
		line-height: 30rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;

	}

	.fd-dialog-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.fd-dialog {
		background-image: url("/static/ic_dialog_bg.png");
		/* border-radius: 30rpx; */
		width: 511rpx;
		height: 560rpx;
		background-size: cover;
		background-position: center;



		/* 设置为 Flex 容器 */
		display: flex;
		/* 子元素在主轴上从下往上排列 */
		flex-direction: column-reverse;
		/* 子元素在交叉轴上水平居中 */
		align-items: center;
		/* 子元素在主轴上垂直居中 */
		/* justify-content: center; */

	}





	.fd-dialog-button {
		width: 80%;
		margin-bottom: 50rpx;
		padding: 10rpx 60rpx;
		background-color: #007aff;
		color: #fff;
		border: none;
		border-radius: 10rpx;
		font-size: 31.9rpx;
	}
</style>